<template>
  <el-dialog
      :title="titleMap[mode]"
      v-model="visible"
      :width="600"
      top="30px"
      destroy-on-close
      @closed="$emit('closed')"
  >
    <el-form
        :model="form"
        :rules="rules"
        :disabled="mode == 'show'"
        ref="dialogForm"
        label-width="80px"
        label-position="right"
    >
    <el-form-item label="栏目名" prop="columnName">
        <el-input
          v-model="form.columnName"
          placeholder="请输入栏目名"
          maxlength="10"
          show-word-limit
          clearable
        >
        </el-input>
      </el-form-item>
      <el-form-item label="顺序" prop="sort">
        <el-input-number v-model="form.sort"> </el-input-number>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="visible = false">取 消</el-button>
      <el-button
          v-if="mode != 'show'"
          type="primary"
          :loading="isSaveing"
          @click="submit()"
      >保 存
      </el-button
      >
    </template>
  </el-dialog>
</template>

<script>
  export default {
    emits: ["success", "closed"],
    data() {
      return {
        mode: "add",
        titleMap: {
          add: "新增",
          edit: "编辑",
          show: "查看",
        },
        visible: false,
        isSaveing: false,
        //表单数据
        form: {
          id: "",
          columnName:"",
          sort:""
        },
        //验证规则
        rules: {
          columnName: [{required: true, message: "栏目名不能为空"}],
        },  
      };
    },
    mounted() {
    },
    methods: {
      //显示
      open(mode = "add") {
        this.mode = mode;
        this.visible = true;
        return this;
      },
      onSuccess(res) {
        console.log(res);
        if (res.code == "200") {
          this.form.articleFile = res.data.fileName;
        } else {
          this.$message.error("上传失败");
        }
        console.log(this.form);
      },
      //表单提交方法
      submit() {
         this.$refs.dialogForm.validate(async (valid) => {
            if (valid) {
               this.isSaveing = true;
               var res;
               if (this.mode == "add") {
                   res = await this.$API.column.add.post(this.form);
               } else if (this.mode == "edit") {
                   res = await this.$API.column.update.post(this.form);
               }
                   this.isSaveing = false;
               if (res.code == 200) {
                   this.visible = false;
                   this.$emit("success", this.form, this.mode);
                   this.$message.success("操作成功");
               } else {
                   this.$alert(res.message, "提示", { type: "error" });
               }
            } else {
               return false;
            }
         });
      },
      //表单注入数据
      setData(row) {
        Object.assign(this.form, row);
      },

    },
  };
</script>
